<!-- 对一个很长的文本进行压缩并还原，前端JavaScript对文本进行压缩，后端Groovy对文本进行解压 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LZ-String & CryptoJS 示例</title>
  <!-- 引入 lz-string 和 crypto-js -->
  <script src="https://cdn.bootcdn.net/ajax/libs/lz-string/1.5.0/lz-string.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
</head>
<body>
  <h1>LZ-String & CryptoJS 示例</h1>
  <textarea id="inputText" rows="10" cols="50" placeholder="输入文本"></textarea><br><br>
  <button onclick="compressAndEncrypt()">压缩并加密</button>
  <button onclick="decryptAndDecompress()">解密并解压</button>
  <p>压缩加密后的数据: <span id="encryptedText"></span></p>
  <p>解密解压后的数据: <span id="decryptedText"></span></p>

  <script>
    // 压缩并加密
    function compressAndEncrypt() {
      const inputText = document.getElementById('inputText').value;
      const key = 'my-secret-key-123'; // AES 密钥（16 字节）

      // 1. 使用 LZ-String 压缩文本
      const compressedText = LZString.compressToUTF16(inputText);
      console.log('压缩后的数据:', compressedText);

      // 2. 使用 CryptoJS 加密压缩后的数据
      const encryptedText = CryptoJS.AES.encrypt(compressedText, key).toString();
      console.log('加密后的数据:', encryptedText);

      // 显示加密后的数据
      document.getElementById('encryptedText').textContent = encryptedText;
    }

    // 解密并解压
    function decryptAndDecompress() {
      const encryptedText = document.getElementById('encryptedText').textContent;
      const key = 'my-secret-key-123'; // AES 密钥（16 字节）

      // 1. 使用 CryptoJS 解密数据
      const decryptedBytes = CryptoJS.AES.decrypt(encryptedText, key);
      const decryptedText = decryptedBytes.toString(CryptoJS.enc.Utf8);
      console.log('解密后的数据:', decryptedText);

      // 2. 使用 LZ-String 解压数据
      const originalText = LZString.decompressFromUTF16(decryptedText);
      console.log('解压后的数据:', originalText);

      // 显示解压后的数据
      document.getElementById('decryptedText').textContent = originalText;
    }
  </script>
</body>
</html>